<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>signal</title>
    <style>
        body{
            height: 100vh;
            display:grid;
            grid-template-columns: repeat(3,2fr);
            grid-template-rows: repeat(3,1fr);
            place-content: center;
            place-items:center;
            grid-template-areas:'. n .'
                                'w . e'
                                '. s .';
            background-color: rgb(122, 122, 122);
        }
        .N{
            grid-area: n;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .S{
            grid-area: s;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .W{
            grid-area: w;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .E{
            grid-area: e;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .lightrow {
            display: flex;
            flex-direction: row;
            align-items: center;
            border:2px solid black;
            background-color: darkgrey;
            border-radius: 15%;
        }
        .lightcol {
            display: flex;
            flex-direction: column;
            align-items: center;
            border:2px solid black;
            background-color: darkgrey;
            border-radius: 15%;
        }

        .red {
            width: 50px;
            height: 50px;
            border-radius: 50%;
           
            margin: 5px;
            background-color: rgba(255, 0, 0, 0.788);
        }

        .yellow {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            
            margin: 5px;
            background-color: rgba(255, 255, 0, 0.774);
        }

        .green {
            width: 50px;
            height: 50px;
            border-radius: 50%;
           
            margin: 5px;
            background-color: rgba(15, 223, 43, 0.966);
        }
        #timer1,#timer2,#timer3,#timer4 {
            margin: 10px;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div class="N">
        <div id="timer1">25</div>
        <div class="lightrow"> 
            <div class="red" id="n1"></div>
            <div class="green" id="n2"></div>
            <div class="yellow" id="n3"></div>
        </div>
    </div>
    <div class="S">
        <div class="lightrow"> 
            <div class="red" id="s1"></div>
            <div class="green" id="s2"></div>
            <div class="yellow" id="s3"></div>
        </div>
        <div id="timer2">25</div>
    </div>
    <div class = "W">
        <div id="timer3">20</div>
        <div class="lightcol"> 
            <div class="red" id="w4"></div>
            <div class="yellow" id="w6"></div>
            <div class="green" id="w5"></div>
        </div>
    </div>
    <div class = "E">
        <div class="lightcol"> 
            <div class="red" id="e4"></div>
            <div class="yellow" id="e6"></div>
            <div class="green" id="e5"></div>
        </div>
        <div id="timer4">20</div>
    </div>
</body>
<script>
    var j=1;
    var k=5;
    var t=50;
    var initial=1;
    var timewe =20;
    var timens =25
    function updateNS(){    
        for(var i=1;i<4;i++){
            document.getElementById("n"+i).style.visibility="hidden";
            document.getElementById("s"+i).style.visibility="hidden";
        }
        document.getElementById("n"+j).style.visibility="visible";
        document.getElementById("s"+j).style.visibility="visible";
            j++;
            if(j>3){
            j=1;
        }
    }
    function updateWE(){    
        for(var i=4;i<7;i++){
            document.getElementById("w"+i).style.visibility="hidden";
            document.getElementById("e"+i).style.visibility="hidden";
        }
        document.getElementById("w"+k).style.visibility="visible";
        document.getElementById("e"+k).style.visibility="visible";
            k++;
            if(k>6){
            k=4;
        }
    }
    function goround(){
        if(timens>=10){
        document.getElementById("timer"+1).innerHTML=timens;
        document.getElementById("timer"+2).innerHTML=timens;
        }
        else{
            document.getElementById("timer"+1).innerHTML="0"+timens;
            document.getElementById("timer"+2).innerHTML="0"+timens;
        }
        if(timewe>=10){
            document.getElementById("timer"+3).innerHTML=timewe;
            document.getElementById("timer"+4).innerHTML=timewe;
            }
            else{
                document.getElementById("timer"+3).innerHTML="0"+timewe;
                document.getElementById("timer"+4).innerHTML="0"+timewe;
            }
        if (t==50||t==30||t==27){
            updateWE();
        }
        if (initial==1){
            initial=0;
            updateNS();
        }
        if (t==25||t==5||t==2){
            updateNS();
        }
        t=t-1;
        timens=timens-1;
        timewe=timewe-1;
        switch(t)
        {
            case -1:
            t=50;
            timens=25;
            timewe=20;
            break;
            
            case 30:
            timewe=3;
            break;

            case 27:
            timewe=27;
            break;

            case 25:
            timens=20;
            break;

            case 5:
            timens=3;
            break;

            case 2:
            timens=27;
            break;

        }
    }
    var myVar = setInterval(goround, 1000);
</script>
</html>